import React, { useEffect, useRef } from 'react'
import * as echarts from 'echarts/core'
import {
	PieChart,
	// 系列类型的定义后缀都为 SeriesOption
} from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'
import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components'
// 注册必须的组件
echarts.use([PieChart, CanvasRenderer, TitleComponent, TooltipComponent, LegendComponent])

const PieChartComponment = (props: any) => {
	const chartRef = useRef(null)
	const options = {
		title: {
			text: props.series?.title || '',
			subtext: '',
			left: 'center',
			bottom: '10',
			textStyle: {
				fontWeight: 'normal',
				fontSize: 14,
			},
		},
		tooltip: {
			show: false,
			trigger: 'item',
		},
		legend: {
			orient: 'vertical',
			right: '2%',
			top: '5%',
			itemGap: 15,
			itemHeight: 10,
			// itemStyle: {
			// 	borderWidth: 2,
			// },
		},
		label: {
			formatter: function (params: any) {
				return (
					'{label|' +
					params.name +
					'}' +
					'{value|：' +
					params.value +
					'次}\n' +
					'{label|占比}' +
					'{value|：' +
					params.percent +
					'%}'
				)
			},
			rich: {
				label: {
					fontSize: 12,
					height: 16,
					width: 50,
					// color: '#9ca9b1',
					align: 'left',
					padding: [0, 0, 0, 10],
				},
				value: {
					fontSize: 12,
					height: 16,
					align: 'left',
					// color: '#9ca9b1',
				},
			},
		},
		series: [
			{
				name: '',
				type: 'pie',
				// radius: '50%',
				minAngle: 10,
				center: props.series?.center || ['40%', '50%'],
				radius: props.series?.radius || '50%',
				itemStyle: {
					borderWidth: '3',
					// borderColor: '#232629',
				},
				data: props.pieData,
			},
		],
	}

	useEffect(() => {
		// 创建一个echarts实例，返回echarts实例。不能在单个容器中创建多个echarts实例
		const chart = echarts.init(chartRef.current as unknown as HTMLDivElement)
		// const chart = echarts.init(chartRef.current as unknown as HTMLDivElement)

		// 设置图表实例的配置项和数据
		chart.setOption(options)

		// 组件卸载
		return () => {
			// myChart.dispose() 销毁实例。实例销毁后无法再被使用
			chart.dispose()
		}
	}, [])
	return (
		<>
			<div style={{ width: props.width, height: '340px' }} ref={chartRef}></div>
		</>
	)
}
export default PieChartComponment
